<style>
    /* START Introduction page all controls table styles */

    article table#allcontrols-table {
        border: none;
        word-break: break-word;
        font-size: 15px;
    }

    article table#allcontrols-table tr {
        vertical-align: top;
        background-color: transparent;
    }

    article table#allcontrols-table tr li:first-child {
        padding-left: 0;
    }

    article table#allcontrols-table li {
        background: none;
        border: none;
    }

    article table#allcontrols-table ul {
        list-style-type: none;
        padding-left: 0px;
    }

    article table#allcontrols-table ul li {
        padding: 5px 5px;
    }

    article table#allcontrols-table .control-category {
        color: #27A306;
        text-transform: uppercase;
        font-weight: bold;
        margin-top: 15px;
        margin-bottom: 5px;
        padding: 3px 5px;
    }

    article table#allcontrols-table ul:not(.docs-tabstrip) li:before {
        background-color: transparent !important;
    }

    /* END Introduction page all controls table styles */
</style>
<table id="allcontrols-table">
    <tbody>
        <tr>
            <td>
                <ul>
                    <li class="control-category">Data Source</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/datasource/razor-page">DataSource</a>
                    </li>
                    <li class="control-category">Data Management</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/data-management/filemanager/binding/razor-page">FileManager</a>
                    </li>
                    <li>
                        Filter
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/data-management/grid/binding/razor-page">Grid</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/data-management/spreadsheet/import-and-export-data/bind-to-data-source#data-source-binding-in-razor-page-scenario">Spreadsheet</a>
                    </li>
                    <li>
                        ListView
                    </li>
                    <li>
                        PivotGrid
                    </li>
                    <li>
                        TreeList
                    </li>
                    <li class="control-category">Conversational UI</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/conversational-ui/chat/razor-page">Chat</a>
                    </li>
                    <li class="control-category">Media</li>
                    <li>
                        MediaPLayer
                    </li>
                    <li>
                        ScrollView
                    </li>
                    <li class="control-category">PDF</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/pdf/pdfviewer/razor-page">PDFViewer</a>
                    </li>
            </td>
            <td>
                <ul>
                    <li class="control-category">Editors</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/autocomplete/binding/razor-pages">AutoComplete</a>
                    </li>
                    <li>
                        ColorPalette
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/colorpicker/razor-page">ColorPicker</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/combobox/binding/razor-page">ComboBox</a>
                    </li>
					<li>
                        <a href="/{{ site.platform }}/html-helpers/editors/checkboxgroup/razor-page">CheckBoxGroup</a>
                    </li>
                    <li>
                        DateInput
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/datepicker/razor-pages">DatePicker</a>
                    </li>
                    <li>
                        DateRangePicker
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/datetimepicker/razor-pages">DateTimePicker</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/dropdownlist/binding/razor-page">DropDownList</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/dropdowntree/binding/razor-page">DropDownTree</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/editor/image-browser#imagebrowser-in-razor-page-scenario">Editor</a>
                    </li>
                    <li>
                        FlatColorPicker
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/imageeditor/razor-page">ImageEditor</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/listbox/binding/razor-pages">ListBox</a>
                    </li>
                    <li>
                        MaskedTextBox
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/multicolumncombobox/binding/razor-page">MultiColumnComboBox</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/multiselect/binding/razor-page">MultiSelect</a>
                    </li>
                    <li>
                        NumericTextBox
                    </li>
					<li>
                        <a href="/{{ site.platform }}/html-helpers/editors/radiogroup/razor-page">RadioGroup</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/rating/razor-page">Rating</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/slider/razor-page">Slider</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/switch/razor-page">Switch</a>
                    </li>
                    <li>
                        TextArea
                    </li>
                    <li>
                        TextBox
                    </li>
                    <li>
                        TimePicker
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/editors/upload/razor-page">Upload</a>
                    </li>
                </ul>
            </td>
            <td>
                <ul>

                    <li class="control-category">Scheduling</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/scheduling/calendar/razor-pages">Calendar</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/scheduling/multiviewcalendar/razor-pages">MultiViewCalendar</a>
                    </li>
                    <li>
                        Gantt
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/scheduling/scheduler/binding/razor-page">Scheduler</a>
                    </li>
                    <li class="control-category">Charts</li>
                    <li>
                        Chart
                    </li>
                    <li>
                        StockChart
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/charts/treemap/razor-pages">TreeMap</a>
                    </li>
                    <li class="control-category">Gauges</li>
                    <li>
                        ArcGauge
                    </li>
                    <li>
                        CircularGauge
                    </li>
                    <li>
                        LinearGauge
                    </li>
                    <li>
                        RadialGauge
                    </li>
                    <li class="control-category">Barcodes</li>
                    <li>
                        Barcode
                    </li>
                    <li>
                        QRCode
                    </li>
                    <li class="control-category">Diagrams and Maps</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/diagrams-and-maps/diagram/binding/razor-pages">Diagram</a>
                    </li>
                    <li>
                        Map
                    </li>
                </ul>
            </td>
            <td>
                <ul>
                    <li class="control-category">Layout</li>
                    <li>
                        Badge
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/layout/dialog/razor-page">Dialog</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/layout/form/razor-page">Form</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/layout/notification/razor-page">Notification</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/layout/splitter/razor-page">Splitter</a>
                    </li>
                    <li>
                        TileLayout
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/layout/tooltip/razor-page">Tooltip</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/layout/window/razor-page">Window</a>
                    </li>
                    <li class="control-category">Navigation</li>
                    <li>
                        BottomNavigation
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/breadcrumb/razor-page">Breadcrumb</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/button/razor-page">Button</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/buttongroup/razor-page">ButtonGroup</a>
                    </li>
                    <li>
                        Drawer
                    </li>
                    <li>
                        FloatingActionButton
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/menu/binding/razor-page">Menu</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/panelbar/binding/razor-page">PanelBar</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/radiobutton/razor-page">RadioButton</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/stepper/razor-page">Stepper</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/tabstrip/razor-page">TabStrip</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/timeline/razor-pages">Timeline</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/toolbar/razor-page">ToolBar</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/treeview/binding#razor-pages">TreeView</a>
                    </li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/navigation/wizard/razor-page">Wizard</a>
                    </li>
                    <li class="control-category">Interactivity and UX</li>
                    <li>
                        <a href="/{{ site.platform }}/html-helpers/interactivity/loader/razor-page">Loader</a>
                    </li>
                    <li>
                        ProgressBar
                    </li>
                    <li>
                        Sortable
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>
